====== Text elements ======

To enter texts independently from a certain question, the most convenient way is this:

  - Go to **Text elements and labels** at the sidebar under **Questionnaire**
  - Click on //New text element//
  - Enter a short //ID// for internal use (e.g. "welcome")
  - Enter the //text//. You can format it using HTML (see below)
  - Save the text block by clicking on //OK//
  - To insert it into the questionnaire, go to **Compose questionnaire**. The newly created text element is now visible on the right under //Texts, images, audio//. You can drag-and-drop the text element into the questionnaire page. You can position it above, between or beneath questions or alone on an own page.

===== Other possibilities =====

There are 4 different ways how to implement texts into the questionnaire.

  * //Text elements//\\ Try to always use text elements for texts. The questionnaire will stay clean and slim, and you are able to use functions like multilingual surveys.
    * [[:en:glossary#drag_drop|Dragging and dropping]] text elements into the questionnaire.
    * Implementing text elements using the php function ''[[:en:create:functions:text|text()]]''.
  * //HTML-Code directly in the questionnaire//\\ Use HTML-code only to insert short snippets of code (e.g. when placing questionnaire elements) or if you have to insert dynamically created content without using placeholders.
    * Drag a //HTML-code//-element into the questionnaire and enter your HTML-code.
    * Insert HTML-code using the PHP-function ''[[:en:create:functions:html|html()]]''. The following example shows HTML-code divided into several lines for better legibility.

<code php>
html('
  <h1> Heading <br>
  Instruments for online surveys </h1>
');
</code>

===== Text formatting =====

There are two ways to format texts: a wiki-format for simple formatting (e.g. in question texts) and HTML-format for advanced formatting (e.g. in welcome texts). You may mix both notations as desired. 

==== Wiki-Notation ====

Use double underscores (''_''), slashes (''/'') and asterisks (''*'') to highlight words or sentences. At some places, use the enter key to break lines.

**Tip:** Use highlighting __very__ sparingly. A homogenous layout looks much more professional. You should not use more than 3 accentuations per page - otherwise the layout will be more confusing than helpful.

^ Description ^ Format-Code ^ Example ^ Result ^
| underlined | <nowiki>__Text__</nowiki> | <nowiki>I am __against__ the proposal</nowiki> | I am __against__ the proposal |
| bold | <nowiki>**Text**</nowiki> | <nowiki>What is **your opinion** on this?</nowiki> | What is **your opinion** on this? |
| italic | <nowiki>//Text//</nowiki> | <nowiki>Rate between //never// and //often//</nowiki> | Rate between //never// and //often// |
| no line break | <nowiki>$$Text$$</nowiki> | <nowiki>No line break at the hyphen: $$e-mail-</nowiki>\\ <nowiki>address$$</nowiki> | No line break at the hyphen:\\ e-mail-address |

If you want text parts to show in the questionnaire, but not as variable labels in your dataset, use double curly brackets (''{'' and ''}''). Texts marked like this also won't show up using the query [[:en:create:functions:value|value()]] in correspondence with the format code ''label''.

^ Description ^ Format-Code ^ Example ^ Output in questionnaire ^ Output in dataset ^
| Show only in questionnaire | <nowiki>{{Text}}</nowiki> | <nowiki>Other {{options:}}</nowiki> | Other options: | Other |

==== HTML formatting ====

Technically, you enter HTML-code at any position in the questionnaire. HTML (HyperText Markup Language) is the standard format for websites in the internet. Don't be afraid - you won't need to know everything about HTML to use it for simple tasks like implementing pictures or texts. It just may be helpful to know the structure.

HTML-Code is made out of two parts: The //actual information// that is to be displayed in the browser and tags around this information that define //how// to display the information. Tags are written in pointy brackets. The following example highlights the tags:

**HTML-Code**
<code html>
<h1>Hello world</h1>
<p>How are you, world?</p>
</code>

Translated into human language, this example says nothing else, but:

  * Write "Hello world". Write it as a first-degree-heading (''h1'').
  * Write "How are you, world?". Write it as a paragraph (''p'').

The output would look like this:\\
{{scr.texts.example1.png}}

Usually, every HTML-tag needs a starting tag (e.g. ''<h1>'') and a closing tag (''</h1>''). The tag ''<p>'' marks the beginning of a paragraph and ''</p>'' its end. The only relevant exceptions are the line break ''<br />'' (which is more like a command ("break the line here!") than a tag) and the image ''<img>''.

**Tip:** The <br>-Tag is especially helpful when labels are not line-breaking correctly in a scale.

**HTML-Code**
<code html>
<p>Here should be a<br>line break</p>
</code>

**Output of the example above**\\
{{scr.texts.example2.png}}

Sometimes, you will need to define additional attributes to tags. The ''<img>''-tag, for example, needs to know where to find the image (''src'', "source") and which text to show in case the image can't be displayed (''alt'', alternative),

**HTML-Code**
<code html>
<img src="https://www.soscisurvey.de/help/layout/logo.SoSci-oFb.150.png" alt="Logo">
</code>

**Output of the example above**\\
{{scr.texts.example3.png}}

===== Most important tags to format texts =====

Along with texts output trough ''html()'', you can use HTML-tags for Question titles, explanations and scale labels. This is an overview over the most important tags:

^ Tag ^ Meaning ^ Example ^ Output ^
| **<p>** | Paragraph | ''<p>Paragraph 1</p><p>Paragraph 2</p>'' | {{:en:create:scr.texts.example.p.png?nolink}} |
| **<br>** | line break | ''this line will break<br>here'' | {{:en:create:scr.texts.example.br.png?nolink|}} |
| **<strong>** | highlighted (depending on browser, usually bold) | ''Text, now <strong>highlighted</strong>'' | Text, now **highlighted** |
| **<b>** | bold | ''Text, partly <b>bold</b>.'' | Text, partly **bold**. |
| **<i>** | italic | ''This text is <i>italic</i>.'' | This text is //italic//. |
| **<u>** | underlined | ''You can <u>underline</u> texts!'' | You can __underline__ texts! |
| **<small>** | Set text smaller | ''This is a sentence<br> <small>And this could be its explanation</small>'' | {{:en:create:scr.texts.example.small.png?nolink|}} |
| **<h1>** | First-degree headline | ''<h1>A. Main part</h1>'' | {{:en:create:scr.texts.example.h1.png?nolink|}} |
| **<h2>** | Second-degree headline | ''<h2>A.1. Definition</h2>'' | {{:en:create:scr.texts.example.h2.png?nolink|}} |
| **<a>** | Hyperlink to a website | ''%%<a href="https://www.soscisurvey.de" target="_blank">SoSciSurvey</a>%%'' | [[https://www.soscisurvey.de|SoSciSurvey]] |
| **<span>** | Text part that can be formatted using CSS | ''%%This is <span style="color: #FF0000">red Text</span>%%'' | {{:en:create:scr.texts.example.span.png?nolink|}} |
| **<div>** | Text block that can be formatted using CSS | ''%%<div style="border: 2px solid #FF0000; background-color: #FFCCCC">Text in a red box</div>%%'' | {{:en:create:scr.texts.example.div.png?nolink|}} |

Tags are better used for textual highlightning than for layouting and design. However, the <span> and the <div> tag are "empty" containers that do not style texts themselves. You can use them to style text (parts) using CSS-formatting. Have a look at [[http://www.w3schools.com/|w3schools]] for further tutorials on this.

In case you need colored text, you can use the color-code in the example and replace it with your color of choice. For example, #FF0000 is FF(=255) red, 00 green, 00 blue, on a scale from 00=none to FF=brightest (the scale goes a little like ''0123456789ABCDEF''). The color calculator can help you with this. You'll find it when editing your **Questionnaire Layout**.

"Common" tags like the <p> or <h1> tag don't have a defined appearance. The font-style and -size is being defined by scoscisurvey through a main CSS. Depending on the Questionnaire Layout a headline may be smaller or larger, or have a different color.

**Example for highlighted Text**
<code html>
<h1>Demonstration of HTML-Tags</h1>
<!-- Highlightning -->
<p>This paragraph contains a <strong>highlighted</strong> word.</p>
<!-- Color -->
<p>This paragraph contains words in several colors: a<span style="color: #00FF00">light</span>, a 
  <span style="color: #009900">medium</span> and a
  <span style="color: #006600">darker green</span></p>
<p>
<!-- Font size and style-->
<p>This is a <span style="font-size: 32px;">large</span> word,</p>
<div style="font-size: 24px; color: #FF0000; font-weight: bold;">
  and a large, bold, red text.
</div>
<div style="margin-top: 32px; padding: 20px; border: 1px solid #FF9900; ">
  <p>Using div's, you can define the margins to the outside of the div (e.g. on the top of the div) and borders </p>
  <p>Using padding, you can define the margins on the inside of the div (e.g. between the border and the text. Here: all around</p>
</div>
</code>

**Output demonstration of the example above**\\
{{:en:create:scr.texts.example4.png?nolink&500|}}

**Tip:** Sometimes a certain text is formatted bold by default. If, at a single point, you need it in standard weight, you can use ''<span style="font-weight: normal">Text</span>''. If you want this element never to be bold, you should edit the questionnaire layout.

===== HTML-Entities =====

Tags are defined using angle brackets, like explained above. Sometimes you need to use angle brackets in your text. For this case, there are the HTML-Entities: &lt; ('less than', <) and &gt; ('greater than', >):

^ Example ^ Output ^
| <p>C<D and C>E</p> | CE |
| <p>C&lt;D and C&gt;E</p> | C<D and C>E |

Other HTML-Entities are the ''&amp;'' fort the ampersand (&) and ''&quot;'' for the quotation mark ("). More helpful Entities like ''&bull;'' (•) are listed at [[http://www.w3schools.com/charsets/ref_html_entities_4.asp|w3schools]].